<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/self-checking-list.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>

    <title>自检关键词</title>
    
  </head>
  <body>
    <!-- 自检关键词 -->
    <div class="self-checking-container">
        <div class="self-checking-head">
            <span class="self-checking-pre">返回</span>
            <p class="self-checking-num">1/20</p>
        </div>
        <p class="self-checking-title">自检关键词</p>

        <div class="self-checking-main">
            <!-- <div class="self-checking-keywory">
                答题关键词
                <div class="icon-right">✔</div>
            </div> -->
        </div>
    </div>

    <div class="self-checking-bottom">
        <p class="self-bottom-con">已掌握的要点，点击内容可标记</p>
        <div class="self-checking-button">
            <div class="btn-pre btn-item">上一题</div>
            <div class="btn-next btn-item">下一题</div>
        </div>
    </div>

    <div class="self-checking-pop">
        <div class="pop-con">
            <div class="pop-title-icon"></div>
            <p class="pop-con-text">您本次的自检成绩为</p>
            <p class="pop-con-score">80</p>
            <div class="pop-btn">
                <div class="pop-btn-item pop-btn-homepage">返回首页</div>
                <div class="pop-btn-item pop-btn-again">再来一次</div>
            </div>
        </div>
    </div>

    <script src="../js/remset.js"></script>

    <script>
        $(function() {

            var testList = [
                {text: '答题关键词'},
                {text: '答题关键词'},
                {text: '答题关键词'},
                {text: '答题关键词'},
            ]
            
            init()

            $('.self-checking-pre').click(function() {
                console.log('返回')
                history.go(-1)
            })


            $('.self-checking-main').on('click', '.self-checking-keywory',function(event) {
                if($(event.currentTarget).hasClass('active')) {
                    $(event.currentTarget).removeClass('active')
                    $(event.currentTarget).addClass('end')
                    var index = $(event.currentTarget).index()
                    $('.icon-right').eq(index).hide()
                } else {
                    $(event.currentTarget).addClass('active')
                    $(event.currentTarget).removeClass('end')
                    var index = $(event.currentTarget).index()
                    $('.icon-right').eq(index).show()
                }
            })

            $('.btn-pre').click(function() {
                console.log('上一题')
                
            })

            $('.btn-next').click(function() {
                console.log('下一题')

                // 不是最后一题调用
                $('.self-checking-main').empty()

                // 最后一题调用
                $('.self-checking-pop').css('display', 'flex')
                $('.self-checking-pop').show()
            })

            $('.pop-btn-homepage').click(function() {
                console.log('返回首页')
            })

            $('.pop-btn-again').click(function() {
                console.log('再来一次')
                $('.self-checking-pop').css('display', 'none')
            })


            // 下一题渲染
            function init() {
                var len = testList.length

                for(var i = 0; i < len; i++) {
                    (function(i) {
                        setTimeout(function() {
                            var item = '<div class="self-checking-keywory init">' +
                                            testList[i].text +
                                            '<div class="icon-right">✔</div>' +
                                        '</div>'
                            $('.self-checking-main').append(item)
                        }, i * 200)
                    })(i)
                    
                }
            }
        })
    </script>
  </body>
</html>